<template>
  <div class="">
    <div class="search">
        <div class="input">

            <label>编号：</label><el-input v-model="searchForm.empNo" placeholder="请输入编码"></el-input>
            <label>手机号：</label><el-input v-model="searchForm.empMobile" placeholder="请输入手机号"></el-input>
            <label>姓名：</label><el-input v-model="searchForm.empName" placeholder="请输入姓名"></el-input>
            <label>是否锁定：</label>
            <el-select v-model="value" placeholder="请选择">
              <el-option value="" label="请选择"></el-option>
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
            </el-select>

            <el-button type="primary" class="se" style="margin-left:10px;" @click="search">搜索</el-button>
        </div>
    </div>
    <div class="add">
       <el-button type="primary" @click="dialogs">新增员工</el-button>
       <el-button type="warning" plain @click="staaffRole">员工角色分配</el-button>
    </div>
     <tableVue :list="list" :radioShwo="true" @changeData="selectionVal" v-loading="loading" :total="total">
       <slot>
           <el-table-column label="操作" align="center" width='380px'>
             <template slot-scope="scope">
               <el-button
                 v-if="scope.row.isLock == 'N'"
                 size="mini"
                 @click="handleEdit(scope.$index, scope.row,1,'Y')">锁定员工
               </el-button>
               <el-button
                 v-else
                 size="mini"
                 @click="handleEdit(scope.$index, scope.row,1,'N')">解锁员工
               </el-button>
               <el-button
                 size="mini"
                 type="danger"
                 class="del"
                 @click="handleEdit(scope.$index, scope.row,3)">删除</el-button>
                 <el-button
                   size="mini"
                   type="success"
                   class="pass"
                   @click="amendPass(scope.row)">修改密码</el-button>
             </template>
           </el-table-column>
       </slot>
     </tableVue>
     <dialogVue title="新增员工" :dialog="dialog" @close="changeData" :state="false">
         <slot>
           <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
               <el-form-item label="员工编号" prop="empNo">
                   <el-input v-model="ruleForm.empNo" placeholder="请输入编码"></el-input>
                </el-form-item>
                <el-form-item label="员工账号" prop="empAccount">
                    <el-input v-model="ruleForm.empAccount" placeholder="请输入账号"></el-input>
                 </el-form-item>
                 <el-form-item label="手机号" prop="empMobile">
                     <el-input v-model="ruleForm.empMobile" placeholder="请输入手机号"></el-input>
                  </el-form-item>
                  <el-form-item label="初始密码" prop="empPassword">
                      <el-input v-model="ruleForm.empPassword" placeholder="请输入密码"></el-input>
                   </el-form-item>
                   <el-form-item label="初始昵称" prop="empNickname">
                       <el-input v-model="ruleForm.empNickname" placeholder="请输入昵称"></el-input>
                    </el-form-item>
                    <el-form-item label="初始姓名" prop="empName">
                        <el-input v-model="ruleForm.empName" placeholder="请输入姓名"></el-input>
                     </el-form-item>
                     <el-form-item label="员工邮件" prop="empEmail">
                         <el-input v-model="ruleForm.empEmail" placeholder="请输入邮件"></el-input>
                      </el-form-item>
                   <el-form-item class="confirm">
                      <el-button type="primary" @click="submitForm('ruleForm')">创建</el-button>
                  </el-form-item>
           </el-form>
         </slot>
     </dialogVue>

     <el-dialog title="员工分配角色" :visible="upRole "width="30%" >
        <div class="" v-loading="Roleloading">
            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>

              <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                  <el-checkbox
                     v-for="(val,key) in roleList"
                    :label="val.roleId"
                    :key="key">
                   {{val.roleName}}
                 </el-checkbox>
            </el-checkbox-group>
        </div>
     <span slot="footer" class="dialog-footer">
       <el-button @click="upRole = false">取 消</el-button>
       <el-button type="primary" @click="upConfirm">确 定</el-button>
     </span>
    </el-dialog>
    <dialogVue title="修改密码" :dialog="password" @close="changeData" :state="false">
         <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
           <el-form-item label="新密码" prop="password">
               <el-input v-model="ruleForm.password" placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item class="confirm">
               <el-button type="primary" @click="renewal('ruleForm')">更新</el-button>
           </el-form-item>
         </el-form>
    </dialogVue>
  </div>
</template>
<script>
    import Data from './StaffData.js'
    import dialogVue from '@/components/dialog.vue'
    import tableVue from '@/components/alltable.vue'
    import { addStaff,staffList , staffRoleallot ,staffRoleList,switchStaff,delStaff} from '@/api/staff/staff'
    import { revampPassword } from '@/api/staff/fromDataStaff'

    import { searchList } from '@/api/role/role'
    import checkPermission from "@/utils/permission"; // 权限判断函数

    export default {
      components : {
        tableVue,
        dialogVue
      },
      data () {
        return {
          options : [{value:'N',label : '否'},{value : 'Y',label : '是'}],
          value:'',
          total : 0,
          checkAll: false,
          loading : false,
          Roleloading :true,
          password : false,
          searchForm : {
            empNo : '',
            empMobile :'',
            empName :''
          },
          roleList : [],
          checkedCities : [],
          isIndeterminate: true,
          condition : '',
          upRole : false,
          empId : '',
          list : {
            thead : [
              {label:'编号',prop:"empNo",rowspan:1},
              {label:'账号',prop:"empAccount",rowspan:1},
              {label:'手机号',prop:"empMobile",rowspan:1},
              {label:'昵称',prop:"empNickname",rowspan:1},
              {label:'姓名',prop:"empNickname",rowspan:1},
              {label:'邮件',prop:"empEmail",rowspan:1},
            ],
            tbody : []
          },
          dialog : false,
          selectionList : [],
          ruleForm : {
            empNo : '',
            empAccount : '',
            empMobile :'',
            empMobile : '',
            empNickname : '',
            empName : '',
            empEmail : '',
            password : '',
            empId :''
          },
          rules : {
            empNo: [{required: true, message: '请输入内容', trigger: 'blur' },{ pattern: /^[0-9a-zA-Z]+$/, message: '只能是数字和字母'}],
            empAccount: [{ required: true, message: '请输入内容', trigger: 'blur' },{ pattern: /^[0-9a-zA-Z]+$/, message: '只能是数字和字母'}],
            empMobile : [{ required: true, message: '请输入内容', trigger: 'blur' },{ pattern: /^1[34578]\d{9}$/, message: '请输入正确的手机号'}],
            empPassword : [{required: true, message: '请输入密码', trigger: 'blur' }],
            empNickname :  [{required: true, message: '请输入昵称', trigger: 'blur' }],
            empName : [{required: true, message: '请输入姓名', trigger: 'blur' }],
            empEmail : [{required: true, message: '请输入邮件', trigger: 'blur' },{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur','change']}]
          },
        }
      },
      mounted () {
        this.getStaffList()
      },
      methods : {
        checkPermission,
        upConfirm () {//分配员工确定
          let data = {
            roleId :this.checkedCities,
            empId : this.empId
          }
          staffRoleallot(data).then(res=>{
            if (res.data.code == 'OK') {
               this.$message.success('分配成功');
               this.upRole = false
            } else {
                this.$message.error(res.data.code);
            }
          })

        },
        handleCheckAllChange(val) { //全选
           this.checkedCities = val ? this.roleList.map(item => {return item.roleId}) : [];
           this.isIndeterminate = false;
         },
         handleCheckedCitiesChange(value) { //单选
            let checkedCount = value.length;
            this.checkAll = checkedCount === this.roleList.length;
            this.isIndeterminate = checkedCount > 0 && checkedCount < this.roleList.length;
        },
        staaffRole () {//员工分配角色
          if (checkPermission('emp_manager_role_add') == true) {
             if (this.selectionList.length > 0) {
                 this.upRole = true;
                 let empId = this.empId
                 staffRoleList(empId).then(res=>{ //员工角色列表
                   if (res.data.code == 'OK') {
                     this.checkedCities = res.data.data.map(item => {return item.roleId})
                   }
                 })
                 searchList().then(res=>{ //拉取所有角色
                   this.roleList = res.data.data.records;
                   this.Roleloading = false
                 })
             } else {
               this.$message.error('请选择分配员工');
             }
          } else {
              this.$message.error('您没有权限分配');
          }
        },
        getStaffList () {
            this.loading = true;
          staffList().then(res=>{
            if (res.data.code == 'OK') {
              this.list.tbody = res.data.data.records;
              this.loading = false;
              this.total = res.data.data.total;
            } else {
              this.loading = false;
            }
          })
        },
        dialogs() {
          if (checkPermission('emp_manager_add') == true) {
              this.dialog = true;
          } else {
            this.$message.error('您没有权限添加');
          }
        },
        changeData (val) {
            this.dialog = val;
            this.password = val;
        },
        handleEdit(idx,item,num,state){
         if(checkPermission('emp_manager_lock') == true) {
             if (num == 1) {//锁定员工按钮
                let data = {
                  empId : item.empId,
                  isLock : state
                }
                let cut = ''
                if(state == 'Y') {
                  cut = '锁定'
                } else {
                  cut = '解锁'
                }
                this.$confirm('此操作将永久'+ cut + item.empNickname + '员工, 是否继续?', '提示', {
                     confirmButtonText: '确定',
                     cancelButtonText: '取消',
                     type: 'warning'
                   }).then(() => {
                     switchStaff(data).then(res=>{
                        if(res.data.code == 'OK') {
                            this.$message.success('操作成功');
                            this.getStaffList()
                        } else {
                            this.$message.error(res.data.code);
                        }
                     })
                   }).catch(() => {
                     this.$message({
                       type: 'info',
                       message: '已取消次操作'
                     });
                   });
             } else {//删除员工
                if (checkPermission('emp_manager_del') == true) {
                  this.$confirm('此操作将永久删除'+ item.empNickname + '员工, 是否继续?', '提示', {
                       confirmButtonText: '确定',
                       cancelButtonText: '取消',
                       type: 'warning'
                     }).then(() => {
                       delStaff(item.empId).then(res=>{
                          if(res.data.code == 'OK') {
                              this.$message.success('删除成功');
                              this.getStaffList()
                          } else {
                              this.$message.error(res.data.code);
                          }
                       })
                     }).catch(() => {
                       this.$message({
                         type: 'info',
                         message: '已取消删除'
                       });
                     });
                }else {
                    this.$message.error('您没有权限操作');
                }
             }
         } else {
            this.$message.error('您没有权限操作');
         }

        },
          selectionVal (val) {
            this.selectionList.push(val);
            this.empId = val.empId
          },
        submitForm (formName) {
          this.$refs.ruleForm.validate((valid)=>{
            if (valid) {
                let data = {
                  empNo : this.ruleForm.empNo,
                  empAccount : this.ruleForm.empAccount,
                  empMobile : this.ruleForm.empMobile,
                  empPassword : this.ruleForm.empPassword,
                  empName : this.ruleForm.empName,
                  empNickname : this.ruleForm.empNickname,
                  empEmail : this.ruleForm.empEmail,
                }
                addStaff(data).then(res=>{
                  if(res.data.code == 'OK') {
                    this.$message.success('添加员工成功');
                    this.dialog = false;
                    this.getStaffList()
                  } else {
                    this.$message.error(res.data.message);
                  }
                })
             }
          })
        },
        search () {
          staffList(this.searchForm.empNo,this.searchForm.empMobile,this.searchForm.empName,this.value).then(res=>{
              if (res.data.code == 'OK') {
                this.list.tbody = res.data.data.records;
                this.$message.success("搜索成功");
              } else {
                this.$message.error("错误");
              }
          })
        },
        amendPass (item) {
            this.password = true;
            this.ruleForm.empId = item.empId;
            this.ruleForm.password = ''
        },
        renewal () {
          var data = {
            empId : this.ruleForm.empId,
            password : Base64.encode(this.ruleForm.password)
          }
          revampPassword(data).then(res=>{
            if (res.data.code == 'OK') {
                this.$message.success("修改成功");
                this.password = false;
            } else {
              this.$message.error(res.data.message);
            }
          })
        }
      }
    }
</script>
<style scoped>
.search {
  width: 100%;
  background-color: #fff;
  padding:20px;
  box-sizing: border-box;
  margin-top: 10px;
  height: 80px;
}
.input {
  /* width: 300px; */
  display: flex;
}
label {
  line-height: 40px;
  color: #333;
  margin: 0 10px;
}
.el-input {
  width:200px;
  height:20px;
}
.add {
  margin-top: 10px;
  padding-left: 14px;
}
.content label {
  display:inline-block;
  width:150px;
  text-align: justify;
  text-align-last: justify;
  line-height: 0;
  font-size: 16px;
}
.content input {
  height:24px;
}
.content p {
  margin: 10px 0;
}
.quan {
  margin-top: 15px;
}
.confirm {
  position: absolute;
  bottom: -1px;
  right: 100px;
}
.pass {
  margin-top: 5px;
}
</style>
